<script setup>
import { reactive, ref, onMounted } from 'vue';
import { page, deleteById } from "@/api/employer";
import { useRouter } from "vue-router";
import { CircleCheck, CircleClose } from '@element-plus/icons-vue'
import { ta } from 'element-plus/es/locales.mjs';


const router = useRouter();
const queryPageParam = reactive({
  username: '',
  name: '',
  pageNo: 1,
  pageSize: 10  // 默认每页10条
});

// 数据
const tableData = ref([]);
const total = ref(0);
const loading = ref(false);
const formatTime = (row) => {
  return row.createTime.replace('T', ' ');
};
// 状态映射
const statusMap = {
  0: { label: '在职', type: 'success', icon: CircleCheck },
  1: { label: '离职', type: 'info', icon: CircleClose },
  2: { label: '休假', type: 'warning', icon: undefined },
  3: { label: '试用期', type: 'primary', icon: undefined }, // 改为 "primary"
  4: { label: '停职', type: 'danger', icon: undefined }
};

const genderMap = {
  1: { label: '男', type: 'primary' }, // 改为 "primary"
  0: { label: '女', type: 'danger' }
};
//职位名称
const positionMap={};
// 分页查询
const handleQueryPage = async () => {
  try {
    loading.value = true;
    const res = await page(queryPageParam);
    tableData.value = res.data.records;
    console.log(tableData.value)
    total.value = res.data.total;
    positionMap.value=tableData.value[0].positionNames
    console.log(positionMap.value)
  } catch (error) {
    console.error('查询失败:', error);
  } finally {
    loading.value = false;
  }
};
// 分页处理
const handlePaginationChange = () => handleQueryPage();

// 操作处理
const handleDetail = (id) => router.push({ path: '/employer/detail', query: { id } });
const handleEdit = (id) => {localStorage.setItem('positionMap', JSON.stringify(positionMap));
router.push({ path: '/employer/edit', query: { id } })};
const handleAdd = () => {
  localStorage.setItem('positionMap', JSON.stringify(positionMap));
   router.push({ path: '/employer/save' })
};

const handleDelete = async (id) => {
  try {
    await deleteById(id);
    handleQueryPage();
  } catch (error) {
    console.error('删除失败:', error);
  }
};

// 初始化加载
onMounted(handleQueryPage);
</script>

<template>
  <div class="employee-management">
    <div class="header">
      <h2>员工管理</h2>
      <div class="actions">
        <el-input 
          v-model="queryPageParam.name" 
          placeholder="请输入姓名" 
          clearable 
          style="width: 200px"
          @keyup.enter="handleQueryPage"
        />
        <el-button type="primary" @click="handleQueryPage">查询</el-button>
        <el-button type="success" @click="handleAdd">新增员工</el-button>
      </div>
    </div>

    <el-table 
      :data="tableData" 
      v-loading="loading"
      stripe 
      border
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column prop="name" label="姓名" width="100" fixed />
      <!-- 性别列 -->
<el-table-column prop="gender" label="性别" width="80">
  <template #default="{ row }">
    <el-tag 
      :type="genderMap[row.gender]?.type || ''" 
      size="small"
    >
      {{ genderMap[row.gender]?.label || '未知' }}
    </el-tag>
  </template>
</el-table-column>
      <el-table-column prop="age" label="年龄" width="80" align="center" />
      <el-table-column prop="position.name" label="职位" width="120" show-overflow-tooltip />
      <el-table-column prop="phone" label="电话" width="120" />
      <el-table-column prop="email" label="邮箱" width="170" />
      <el-table-column prop="address" label="地址" width="243" />
      <el-table-column prop="hireDate" label="入职时间" width="120" />
      <!-- 状态列 -->
<el-table-column prop="status" label="状态" width="100">
  <template #default="{ row }">
    <el-tag 
      :type="statusMap[row.status]?.type || ''" 
      :icon="statusMap[row.status]?.icon"
      effect="light"
      round
    >
      {{ statusMap[row.status]?.label || '未知' }}
    </el-tag>
  </template>
</el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180" :formatter="formatTime"/>
      <el-table-column label="操作" width="220" fixed="right">
        <template #default="{ row }">
          <el-button size="small" @click="handleDetail(row.employeeId)">查看</el-button>
          <el-button type="primary" size="small" @click="handleEdit(row.employeeId)">编辑</el-button>
          <el-popconfirm 
            title="确定删除该员工吗？" 
            @confirm="handleDelete(row.employeeId)"
          >
            <template #reference>
              <el-button type="danger" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-model:current-page="queryPageParam.pageNo"
      v-model:page-size="queryPageParam.pageSize"
      :page-sizes="[5, 10, 20, 50]"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      background
      @size-change="handlePaginationChange"
      @current-change="handlePaginationChange"
      class="pagination"
    />
  </div>
</template>

<style scoped>
.employee-management {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.actions {
  display: flex;
  gap: 10px;
}

.pagination {
  margin-top: 20px;
  justify-content: flex-end;
}

.el-table {
  margin-top: 20px;
}

.el-tag {
  margin: 2px;
}
</style>